<!--
 * @Description: 
 * @Version: 2.0
 * @Author: Xing
 * @Date: 2021-02-06 20:23:44
 * @LastEditors: Xing
 * @LastEditTime: 2021-02-06 20:53:05
-->
<template>
  <!-- 将组件传送到id为modal的元素上挂载 (传送门特性)-->
  <teleport to="#modal">
    <div id="center" v-if="isOpen">
      <h2><slot>this is a modal</slot></h2>
      <button @click="buttonClick">Close</button>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    isOpen: Boolean,
  },
  emits: {
    //验证
    // 'close-modal': (payload: any) => {
    //   return (payload.type = 'close');
    // },
    // 不验证
    'close-modal': null,
  },
  setup(props, context) {
    const buttonClick = () => {
      context.emit('close-modal');
    };
    return {
      buttonClick,
    };
  },
});
</script>

<style scoped>
#center {
  width: 200px;
  height: 200px;
  background: #f3f3f3;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
